<div class="aside-wrap">
    <div class="navi-wrap">
        <!-- user -->
        <div class="clearfix hidden-xs text-center hide" id="aside-user">  <!--通过id定位-->
            <div class="dropdown wrapper" dropdown>
                <a ui-sref="app.page.profile">
          <span class="thumb-lg w-auto-folded avatar m-t-sm">
            <img src="img/a0.jpg" class="img-full" alt="...">
          </span>
                </a>
                <a href class="dropdown-toggle hidden-folded" dropdown-toggle>
          <span class="clear">
            <span class="block m-t-sm">
              <strong class="font-bold text-lt">John.Smith</strong>
              <b class="caret"></b>
            </span>
            <span class="text-muted text-xs block">Art Director</span>
          </span>
                </a>
                <!-- dropdown -->
                <ul class="dropdown-menu animated fadeInRight w hidden-folded">
                    <li class="wrapper b-b m-b-sm bg-info m-t-n-xs">
                        <span class="arrow top hidden-folded arrow-info"></span>
                        <div>
                            <p>300mb of 500mb used</p>
                        </div>
                        <progressbar value="60" type="white" class="progress-xs m-b-none dker"></progressbar>
                    </li>
                    <li>
                        <a href>Settings</a>
                    </li>
                    <li>
                        <a ui-sref="app.page.profile">Profile</a>
                    </li>
                    <li>
                        <a href>
                            <span class="badge bg-danger pull-right">3</span>
                            Notifications
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a ui-sref="access.signin">Logout</a>
                    </li>
                </ul>
                <!-- / dropdown -->
            </div>
            <div class="line dk hidden-folded"></div>
        </div>
        <!-- / user -->

        <!-- nav -->
        <nav ui-nav class="navi">
            <!-- list -->
            <ul class="nav">
                <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                    <span translate="aside.nav.HEADER">数据库</span>
                </li>
                <li ui-sref-active="active">
                    <a ui-sref="paas.mysql">
                        <i class="glyphicon glyphicon-calendar icon text-info-dker"></i>
                        <span class="font-bold" translate="aside.nav.mysql.MYSQL">Mysql</span>
                    </a>
                </li>

                <li ui-sref-active="active">
                    <a ui-sref="paas.redis">
                        <i class="glyphicon glyphicon-stats icon text-primary-dker"></i>
                        <span class="font-bold" translate="aside.nav.redis.REDIS">Redis</span>
                    </a>
                </li>

                <li ui-sref-active="active">
                    <a ui-sref="paas.mongodb">
                        <i class="glyphicon glyphicon-briefcase icon"></i>
                        <span class="font-bold" translate="aside.nav.mongodb.MONGODB">Mongodb</span>
                    </a>
                </li>



                <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                    <span translate="aside.nav.THEADER">服务器</span>
                </li>

                <li ui-sref-active="active">
                    <a ui-sref="paas.zookeeper.basicInfo">
                        <i class="glyphicon glyphicon-signal"></i>
                        <span class="font-bold" translate="aside.nav.zookeeper.ZOOKEEPER">Zookeeper</span>
                    </a>
                </li>


                <li class="line dk"></li>

                <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                    <span translate="aside.nav.YHEADER">基本</span>
                </li>

                <li>
                    <a href class="auto">
                          <span class="pull-right text-muted">
                            <i class="fa fa-fw fa-angle-right text"></i>
                            <i class="fa fa-fw fa-angle-down text-active"></i>
                          </span>
                        <i class="glyphicon glyphicon-briefcase icon"></i>
                        <span class="font-bold" translate="aside.nav.projects.PROJECTMANAGE">项目管理</span>
                    </a>
                    <ul class="nav nav-sub dk">
                        <li class="nav-sub-header">
                            <a href>
                                <span translate="aside.nav.projects.PROJECTMANAGE">项目管理</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.dashboard-v1">
                                <span translate="aside.nav.projects.PROJECTLIST">项目列表</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.dashboard-v1">
                                <span translate="aside.nav.projects.CREATEPROJECT">新建项目</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.dashboard-v1">
                                <b class="label bg-info pull-right">N</b>
                                <span translate="aside.nav.projects.EDITPROJECT">编辑项目</span>
                            </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href class="auto">
                      <span class="pull-right text-muted">
                        <i class="fa fa-fw fa-angle-right text"></i>
                        <i class="fa fa-fw fa-angle-down text-active"></i>
                      </span>
                        <i class="glyphicon glyphicon-file icon"></i>
                        <span class="font-bold" translate="aside.nav.nodes.NODEMANAGE">节点管理</span>
                    </a>
                    <ul class="nav nav-sub dk">
                        <li class="nav-sub-header">
                            <a href>
                                <span translate="aside.nav.nodes.NODEMANAGE">节点管理</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.dashboard-v1">
                                <span translate="aside.nav.nodes.NODELIST">节点列表</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.dashboard-v1">
                                <span translate="aside.nav.nodes.CREATENODE">新建节点</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.dashboard-v1">
                                <b class="label bg-info pull-right">N</b>
                                <span translate="aside.nav.nodes.EDITNODE">编辑节点</span>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="line dk"></li>

                <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                    <span translate="aside.nav.your_stuff.YOUR_STUFF">你的资料</span>
                </li>
                <li>
                    <a ui-sref="app.paas.profile">
                        <i class="icon-user icon text-success-lter"></i>
                        <b class="badge bg-success pull-right">30%</b>
                        <span translate="aside.nav.your_stuff.PROFILE">个人资料</span>
                    </a>
                </li>
                <li>
                    <a ui-sref="app.paas.docs">
                        <i class="icon-question icon"></i>
                        <span translate="aside.nav.your_stuff.DOCUMENTS">文档说明</span>
                    </a>
                </li>
            </ul>
            <!-- / list -->
        </nav>
        <!-- nav -->

        <!-- aside footer -->
        <div class="wrapper m-t">
            <div class="text-center-folded">
                <span class="pull-right pull-none-folded">60%</span>
                <span class="hidden-folded" translate="aside.MILESTONE">Milestone</span>
            </div>
            <progressbar value="60" class="progress-xxs m-t-sm dk" type="info"></progressbar>
            <div class="text-center-folded">
                <span class="pull-right pull-none-folded">35%</span>
                <span class="hidden-folded" translate="aside.RELEASE">Release</span>
            </div>
            <progressbar value="35" class="progress-xxs m-t-sm dk" type="primary"></progressbar>
        </div>
        <!-- / aside footer -->
    </div>
</div>